<template>
  <div class="panel-body-detail">
        
        <div class="panel-top">
            <span class="add-item" @click="addCoursel">
                <i class="addpic-icon u-icon-img"></i>
                添加轮播图片 
            </span>
            <span class="panel-tips">
                500KB以内、尺寸（750*312）
            </span>
        </div>
        <span class="sort-menus">(拖拽选项可以进行排序)</span>
        <div class="panel-body panel-carousel">
            <draggable v-model="selectItem.carouselImg" @start="drag=true" @end="dragEnd">
                <div class="panel-item" v-for="(item,index) in selectItem.carouselImg" :key="index">
                    <div class="img" @click.stop="uploadImg(index)" @mouseenter="showTips(index)" @mouseleave="hideTips" :style="{'background-image':'url('+ item.pic +')'}">
                        <!-- <img width="100%" :src="item.pic"/> -->
                        <span v-show="(index==lastIndex)&&item.pic" @click.stop.prevent="uploadImg(index, item.pic)" class="replace-img">
                            <b>替换图片</b>
                        </span>
                    </div>
                    <div class="text-select">
                        <articleListType v-model="item.article.cateId" :select-class="['article-select','com-select']"></articleListType>
                        <articleDetailList v-model="item.article.artId" :select-class="['article-select','com-select']" :article-type="item.article.cateId"></articleDetailList>
                    </div>
                    <div class="delete-btn" @click="itemRemove(index)">
                        <i class="el-icon-delete item-delete"></i>
                    </div>
                </div>
            </draggable>
        </div>
        <div class="wrapper-dialog" v-if="dialogVisible">
            <el-dialog 
                title="上传图片"
                :visible.sync="dialogVisible"
                :before-close="handleClose"
                :class="['dialog-upload-img']"
                :modal="false"
            >
                <div class="dialog-upload-wrapper">
                    <file-upload 
                            ref="fileUploadComp"
                            class="file-uploadout"
                            @onSuccess="onSuccess"
                            @remove="handleRemove"
                            :file-list.sync="arr" 
                            :img-size="0.48828125"
                            :file-list-show.sync="fileListShow">
                                <div class="up-container el-upload el-upload--text">
                                <i class="el-icon-plus avatar-uploader-icon"></i>
                            </div> 
                    </file-upload>
                    <span class='tip-slot'>上传图片格式jpg、png、gif、jpeg</span>
                    <el-row type="flex" class="row-bg" justify="center">
                        <el-col>
                            <el-button @click="cancleDialog">取消</el-button>
                            <el-button @click="setItemPic" type="primary" :disabled="disabled">确定</el-button>
                        </el-col>    
                    </el-row>    
                </div>
            </el-dialog>
        </div>
  </div>
</template>

<script>
import Swiper from 'swiper/dist/js/swiper.js';
import {mapGetters, mapMutations} from 'vuex';
import draggable from 'vuedraggable';
import FileUpload from 'components/Upload/fileUpload';
import articleListType from './articleListType';
import articleDetailList from './articleDetailList';
export default {
    name: 'carouselPanel',
    components: {
        draggable,
        FileUpload,
        articleListType,
        articleDetailList
    },
    data() {
        return {
            drag: false,
            dialogVisible: false,
            arr: [],
            fileListShow: true,
            innerSelectIndex: -1,
            pic: '',
            disabled: true,
            showReplace: false,
            lastIndex: -1
        }
    },
    
    computed: {
        ...mapGetters([
            'selectItem',
            'selectIndex',
            'phoneData'
        ])
    },
    methods: {
        ...mapMutations([
            'SET_PANELDATA',
            'UPLOAD_SET_IMG',
            'SELECT_ITEM'
        ]),
        onSuccess(data) {
            // 
            if (data&&data.imgUrl) {
                this.disabled = false;
                this.pic = data.imgUrl;
            } else {
                this.$message({
                    type: 'error',
                    message: '上传文件出现问题'
                })
            }
        },
        handleRemove() {
            // //console.log(1221212, 'remove');
            // 弹窗确认置灰
            this.disabled = true;
        },
        // 显示每个替换图片蒙层
        showTips(index) {
            this.lastIndex = index;
        },
        hideTips() {
            this.lastIndex = -1;
        },
        // 隐藏dialog
        handleClose() {
            //
            this.disabled = true;
            this.dialogVisible = false;
            this.$refs.fileUploadComp.clearFiles();
        },
        // 添加轮播选项图
        addCoursel() {
            // 
            // //console.log(this.selectItem.carouselImg.length);
            if (this.selectItem.carouselImg.length > 8) {
                this.$message({
                    message: '最多只能添加9个轮播图片',
                    type: 'info'
                });
                return ;
            }
            let carouselJson = {
                carouselImgData: {
                    url: '',
                    pic: require('../../../assets/eschool/banner_default.png'),
                    article: {
                        cateId: '',
                        artId: ''
                    }
                },
                type: 'carousel',
                index: this.selectIndex
            }
            this.SET_PANELDATA(carouselJson);
            this.updateSwiper();
        },
        updateSwiper() {
            this.$nextTick(() => {
                let phoneContainer = document.querySelectorAll('.phone-comp');
                let selectCarsouselItem = phoneContainer[this.selectIndex].querySelector('.carousel-container');
              
                selectCarsouselItem.swiper&&selectCarsouselItem.swiper.destroy();
                selectCarsouselItem.swiper = new Swiper(selectCarsouselItem, {
                    pagination: '.swiper-pagination',
                    paginationClickable: true,
                    loop: true,
                    autoplay: 6000,
                    autoplayDisableOnInteraction: false,
                    observer: true
                });
                // 一张图片的时候停止轮播
                if (this.selectItem.carouselImg.length <= 1) {
                    selectCarsouselItem.swiper&&selectCarsouselItem.swiper.stopAutoplay(); // stopAutoPlay()
                }
            });
        },
        // 删除每个元素
        itemRemove(index) {
            if (this.selectItem.carouselImg.length <= 1) {
                this.$message({
                    type: 'info',
                    message: '至少有一个轮播图片显示'
                })
                return;
            }
            this.selectItem.carouselImg.splice(index, 1);
            this.updateSwiper();
        },
        // 上传图片
        uploadImg(index, picUrl) {
            // 
            this.innerSelectIndex = index;
            this.dialogVisible = true;
            this.arr = [{name: '', url: picUrl}];
        },
        dragEnd() {
            this.updateSwiper();
        },
        cancleDialog() {
            this.handleClose();
        },
        setItemPic() {
            this.updateItemPic();
            this.handleClose();
            this.$refs.fileUploadComp.clearFiles();
        },
        updateItemPic() {
            let innerSelectIndex = this.innerSelectIndex
            this.UPLOAD_SET_IMG({
                innerSelectIndex,
                pic: this.pic
            });
            this.updateSwiper(); // FIXME: 更新完图片之后更新组件
        }
    }
}
</script>

<style lang="scss">
    .panel-tips {
        font-size: 12px;
    }
    .sort-menus {
        display: inline-block;
        padding-top: 10px;
    }
    .panel-carousel {
        margin-top: 10px;
        .add-item {
            display: inline-block;
            -webkit-user-select: none;
            user-select: none;
        }
        
       
        .replace-img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: rgba(27, 27, 27, 0.52);
            text-align: center;
            b {
                font-size: 12px;
                position: absolute;
                top: 50%;
                left: 50%;
                line-height: 100%;
                color: #fff;
                -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
            }
        }
    }
    // 上传弹窗
    .dialog-upload-img {
        .el-dialog--small {
            min-width: 400px;
            width: 400px;
        }
        .el-dialog__header {
            text-align: left;
        }
         .file-uploadout {
            width: 160px;
            margin: 0 auto 25px;
        }
    }
    
</style>
